<template>
  <div class="container">
    <div class="content-header">
      <div class="search">
        <form class="search-content">
          <el-input
            autocomplete="on"
            type="text"
            v-model="keyword"
            maxlength="100"
            placeholder="请输入你感兴趣的内容"
             @focus="isSearchFoucs = true"
            @blur="isSearchFoucs = false"
            v-on:mouseover.native="isSearchMouse = true"
            v-on:mouseleave.native="isSearchMouse = false" 
          >
            <el-button slot="append" icon="el-icon-search" @click="searchBtn()"
              >搜索</el-button
            >
          </el-input>
        </form>

        <div
          @mousedown="isSearchClick = true"
          @mouseout="isSearchClick = false"
          id="searchContent"
          v-show="isSearchFoucs || isSearchMouse || isSearchClick"
          :class="token == undefined ? 'unsearch-box' : 'search-box'"
        >
  
          <template>
            <div class="history-box" v-show="isSearch">
              <div class="search-part">
                <p>历史记录</p>
                <span class="el-icon-delete" @click="clearSearch()"
                  >清除记录</span
                >
              </div>
              <div class="history-recode">
                <ul>
                  <li v-for="item in searchHistoryList" :key="item.id">
                    <router-link
                      :to="{
                        path: 'searchDetail',
                        query: { keyword: item.keyword },
                      }"
                    >
                      <p>{{ item.keyword }}</p></router-link
                    >
                    <i class="el-icon-close"></i>
                  </li>
                </ul>
              </div>
            </div>
            <div class="want-box">
              <div class="search-part">
                <p>猜你想搜</p>
                <span class="el-icon-refresh">换一换</span>
              </div>
              <div class="want-recode">
                <ul>
                  <li v-for="item in searchWantList" :key="item.id">
                    <router-link
                      :to="{
                        path: 'searchDetail',
                        query: { keyword: item.keyword },
                      }"
                    >
                      <p>{{ item.keyword }}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
            <div class="hotspot-box">
              <div class="search-part">
                <p>音秀热点</p>
              </div>
            </div>
            <div class="hotspot-recode">
              <ul>
                <li
                  v-for="(topic, index) in topicHotList.slice(0, 5)"
                  :key="topic.topicId"
                >
                  <div class="grades" v-if="index < 3"></div>
                  <div class="other-grades" v-else>{{ index + 1 }}</div>
                  <router-link
                    :to="{
                      path: 'searchDetail',
                      query: { keyword: topic.topicTitle },
                    }"
                  >
                    <p>{{ topic.topicTitle }}</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </template>
        </div>
      </div>

      <div class="feature">
        <ul style="display: flex; align-items: center">
          <li class="notification-box">
            <el-button type="info" icon="el-icon-bell" circle></el-button
            ><span class="feature-title">通知</span>
            <div
              :class="token == undefined ? 'unnotification' : 'notification'"
            >
              <template v-if="token == undefined"> 请先登录！ </template>
              <template v-else>
                <div class="notification-title">
                  <span class="notification-title-left">互动消息</span>
                </div>
                <hr style="border: 1px solid #2d2d2d" />
                <ul style="margin-top: 30px">
                  <li v-for="item in noticeList" :key="item.noticeId">
                    <div style="position: relative">
                      <img :src="item.senderAvatar" class="firend-photo" />
                      <i
                        :class="[
                          'iconfont',
                          'notice-icon',
                          iconList[item.actionType],
                        ]"
                      ></i>
                    </div>
                    <div class="notification-left">
                      <p class="notification-left-name">
                        {{ item.senderName }}
                      </p>
                      <p class="notification-left-content">
                        {{ item.content }}
                      </p>
                      <span
                        >{{ item.actionType | filterStatus }}
                        {{ item.createTime | formatDate }}</span
                      >
                    </div>
                    <div class="notification-right">
                      <img
                        :src="item.sourcePhoto"
                        class="cover-picture"
                      />
                    </div>
                  </li>
                </ul>
                <div class="nothing-more">
                  <p>暂时没有更多了~</p>
                </div>
              </template>
            </div>
          </li>
          <li class="information-box">
            <div>
              <el-button type="info" icon="el-icon-message" circle></el-button
              ><span class="feature-title">私信</span>

              <div
                v-if="isReveal"
                :class="token == undefined ? 'ungaine' : 'gaine'"
              >
                <template v-if="token == undefined"> 请先登录！ </template>
                <template v-else>
                  <div class="information-title">
                    <p>私信(5)</p>
                  </div>
                  <hr style="border: 1px solid #2d2d2d" />
                  <ul style="margin-top: 43px">
                    <li
                      v-for="(item, index) in windowList"
                      :key="item.talkId"
                      @click="changeWindow(item, index)"
                    >
                      <div>
                        <img :src="item.talkAvatar" class="firend-photo" />
                      </div>
                      <div class="information-left">
                        <p>{{ item.talkName }}</p>
                        <span>7分钟前在线</span>
                      </div>
                      <div class="information-right">
                        {{ item.chatRecordList.length }}
                      </div>
                    </li>
                  </ul>
                  <div class="nothing-more">
                    <p>暂时没有更多了~</p>
                  </div>
                </template>
              </div>
              <div v-else class="gaine-window" v-show="isVision">
                <div class="gaine-left">
                  <div class="information-title">
                    <p>私信(7)</p>
                  </div>
                  <hr style="border: 1px solid #2d2d2d" />
                  <ul style="margin-top: 43px">
                    <li
                      v-for="(item, index) in windowList"
                      :key="item.talkId"
                      @click="changeDetailWindow(item, index)"
                      :class="[
                        activeChatIndex == index ? 'chat-box-active' : '',
                      ]"
                    >
                      <div>
                        <img :src="item.talkAvatar" class="firend-photo" />
                      </div>
                      <div class="information-left">
                        <p>{{ item.talkName }}</p>
                        <span>7分钟前在线</span>
                      </div>
                      <div class="information-right">
                        {{ item.chatRecordList.length }}
                      </div>
                    </li>
                  </ul>
                  <div class="nothing-more">
                    <p>暂时没有更多了~</p>
                  </div>
                </div>
                <div class="gaine-right">
                  <div class="chat-window">
                    <div class="chat-header-window">
                      <div class="chat-header-name"><h6>1</h6>
                        <p>查看Ta的主页<i class="el-icon-menu"></i></p>
                      </div>

                      <div class="chat-header-btn">
                        <el-button type="text" @click.native="isReveal = true"
                          >退出会话</el-button
                        >
                        <el-button
                          type="text"
                          icon="el-icon-more"
                          class="open-more-function"
                        ></el-button>
                        <div class="chat-more-box">
                          <ul>
                            <li>消息免打扰</li>
                            <li @click="topChat()">置顶聊天</li>
                            <li @click="deleteChat()">刪除聊天</li>
                            <li>举报</li>
                          </ul>
                        </div>
                        <el-button
                          type="text"
                          icon="el-icon-close"
                          @click="changeVision()"
                        ></el-button>
                      </div>
                    </div>
                    <div class="chat-content" id="words">
                      <div
                        v-for="(recordItem, index) in chatRecordList"
                        :key="index"
                      >
                        <div
                          v-if="
                            formatDateBetween(
                              recordItem.msgTime,
                              chatRecordList[index == 0 ? 1 : index - 1].msgTime
                            )
                          "
                          class="concat-time"
                        >
                          <p>{{ recordItem.msgTime | formatDate }}</p>
                        </div>
                        <div
                          v-if="recordItem.msgUserType == 1"
                          class="opposite-side clearfix"
                        >
                          <div class="opposite-picture">
                            <img
                              :src="recordItem.userAvatar"
                              class="chat-firend-picture"
                            />
                          </div>
                          <div class="opposite-word">
                            {{ recordItem.msgContent }}
                          </div>
                        </div>
                        <div v-else class="my-side clearfix">
                          <div class="my-word">
                            {{ recordItem.msgContent }}
                          </div>
                          <div class="my-picture">
                            <img
                              :src="userInfo.avatar"
                              class="chat-my-picture"
                            />
                          </div>
                        </div>
                        <div style="clear: both"></div>
                      </div>
                    </div>
                    <div class="chat-bottom-window">
                      <el-input
                        placeholder="请输入内容"
                        v-model="chatContent"
                        class="input-with-select"
                        id="talksub"
                        @click="sendFun()"
                      >
                        <i
                          slot="suffix"
                          class="el-icon-position"
                          style="font-size: 18px"
                          @click="sendMessage()"
                        ></i>
                      </el-input>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="contribute-box">
            <el-button
              type="info"
              class="iconfont icon-send-message"
              circle
            ></el-button
            ><span class="feature-title">投稿</span>
            <div class="contribute">
              <ul>
                <li @click="toManagementPage('/serve')">发布视频</li>
                <li @click="toManagementPage('/dataScreening')">作品数据</li>
                <li @click="toManagementPage('/serviceHome')">
                  创业者服务平台
                </li>
              </ul>
            </div>
          </li>
          <div class="customer" v-if="token == undefined">
            <el-button
              icon="el-icon-user-solid"
              style="border: none; color: #fff; background: #fe2c55"
              @click="openLoginBtn()"
              >登录</el-button
            >
          </div>
          <div v-else class="user-photo">
            <img :src="userInfo.avatar" @click="backUser()" />
            <div>
              <div class="user-function">
                <div class="user-pop">
                  <p>{{ userInfo.username }}</p>
                  <div style="font-size: 13px">
                    保存登录信息<el-switch
                      v-model="saveLoginInfo"
                      active-color="#13ce66"
                      inactive-color="#c7c7c7"
                      :active-value="true"
                      :inactive-value="false"
                      style="zoom: 0.7; margin-left: 7px"
                    >
                    </el-switch>
                  </div>
                </div>
                <div class="four-function">
                  <ul>
                    <li @click="changeTab('0')">
                      <el-button
                        type="info"
                        icon="el-icon-message"
                        circle
                      ></el-button>
                      <p>{{ headerUserInfo.worksCount }}</p>
                      <span>我的作品</span>
                    </li>
                    <li @click="changeTab('1')">
                      <el-button
                        type="info"
                        icon="el-icon-message"
                        circle
                      ></el-button>
                      <p>{{ headerUserInfo.likeCount }}</p>
                      <span>我的喜欢</span>
                    </li>
                    <li @click="changeTab('2')">
                      <el-button
                        type="info"
                        icon="el-icon-message"
                        circle
                      ></el-button>
                      <p>{{ headerUserInfo.collectCount }}</p>
                      <span>我的收藏</span>
                    </li>
                    <li @click="changeTab('3')">
                      <el-button
                        type="info"
                        icon="el-icon-message"
                        circle
                      ></el-button>
                      <p>{{ headerUserInfo.visitHistoryCount }}</p>
                      <span>观看历史</span>
                    </li>
                  </ul>
                </div>
                <hr style="border: 1px solid #2d2d2d; margin: 10px 0" />
                <div class="four-title">
                  <ul>
                    <router-link to="/user"><li>个人主页</li></router-link>
                    <router-link to="/hot"><li>音秀热榜</li></router-link>
                    <router-link to="/friend"><li>我的好友</li></router-link>
                    <el-button
                      type="text"
                      @click="logoutFun()"
                      style="margin-top: 2px"
                      ><li>退出登录</li></el-button
                    >
                    <el-button
                      type="text"
                      icon="el-icon-setting"
                      @click="handleSettings()"
                      >设置</el-button
                    >
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>
    </div>
    <div>
      <el-dialog
        title="设置"
        :visible.sync="dialogSettins"
        width="40%"
        append-to-body
        close="setting"
        class="system-box"
        :before-close="handleClose"
      >
        <div><systemSetting></systemSetting></div>
      </el-dialog>
    </div>

    <div v-if="openLogin" class="login-content">
      <div class="login">
        <Login :openLogin="openLogin" @changeMsg="changeMsgFun"></Login>
      </div>
    </div>
  </div>
</template>

<script>
import { socket } from "@/utils/websocket";
import Login from "@/components/Login.vue";
import { getTopicHotListApi } from "@/api/hot";
import { getUserInfoApi } from "@/api/user";
import systemSetting from "@/components/systemSetting.vue";
import { getToken, setToken, removeToken } from "@/utils/auth";
import {
  getHeaderUserInfoApi,
  getNoticeListApi,
  getWindowListApi,
  getChatWindowListApi,
  searchChatRecordListApi,
  searchHistoryListApi,
  searchWantListApi,
  deleteSearchHistoryApi,
  clearHistoryListApi,
  searchListApi,
  deleteChatWindowApi,
  topChatWindowApi,
} from "@/api/navHeader";
import systemSettingVue from "./systemSetting.vue";
import { formatDate } from "@/utils/date";

export default {
  data() {
    return {
      isVision: true,
      isReveal: true,
      keyword: "",
      pageNum: 1,
      indexType: 0,
      isSearch: true,
      searchHistoryList: [],
      searchWantList: [],
      token: getToken(),
      topicHotList: [],
      chatWindowInfo: {},
      isUnfold: false,
      isPrivateLetter: false,
      chatContent: "",
      windowList: [],
      noticeList: [],
      chatRecordList: [],
      isOnline: false,
      dialogSettins: false,
      userInfo: this.$store.state.userInfo,
      headerUserInfo: "",
      saveLoginInfo: false,
      isSearchClick: false,
      isSearchFoucs: false,
      isSearchMouse: false,
      iconList: [
        "icon-message",
        "icon-message",
        "icon-like",
        "icon-concern",
        "icon-system",
      ],
      activeChatIndex: 0,
      loading: true,
      openLogin: false,
      websocketCount: -1,
      // 查询条件
      queryCondition: {
        type: 1,
        params: {
          account: "yx23050001",
          password: "123456",
        },
      },
    };
  },
  components: {
    systemSetting,
    Login,
  },
  computed: {
    isEdit() {
      return this.$store.state.token; // 需要监听的数据
    },
  },
  watch: {
    isEdit(newVal, oldVal) {
      this.token = newVal;
    },
  },

  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "MM-dd hh:mm");
    },
    filterStatus: function (val) {
      // 0：对方评论了你的作品 1.回复了你的评论 2：对方给你点赞 3：对方关注了你 4：系统通知
      var typeArr = [
        "对方评论了你的作品",
        "回复了你的评论",
        "对方给你点赞",
        "对方关注了你",
        "系统通知",
      ];
      return typeArr[val];
    },
  },
  created() {
    this.headerUserFun();
    this.getNoticeListFun();
    this.getWindowListFun();
    this.searchHistoryListFun();
    this.searchWantListFun();
    this.getTopicHotListFun();
    // 初始化websocket对象
    // window.location.host获取ip和端口，
    // process.env.VUE_APP_WEBSOCKET_BASE_API获取请求前缀
    socket.initWebSocket();
    socket.websocket.onmessage = this.websocketOnMessage;
  },
  mounted() {
    document.getElementById("searchContent").onclick = function (e) {
      var e = e || window.event;
      var elem = e.target;
      var targetArea = document.getElementById("searchContent");
      if (targetArea.contains(elem)) {
        this.isSearchClick = true;
      } else {
        this.isSearchClick = false;
      }
    };
  },
  methods: {
    sendFun() {
      var now = new Date();
      var oTalk_sub = document.getElementById("talksub");
      var oWords = document.getElementById("words");
      var sTalk =
        "<div>插入一条信息使滚动条向上翻卷!!! " + now.getTime() + "</div>";
      oWords.innerHTML = oWords.innerHTML + sTalk;
      oWords.scrollTop = oWords.scrollHeight;
    },
    logoutFun() {
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    },
    toManagementPage(path) {
      if (this.token == null || this.token == undefined) {
        this.$message({
          message: "请你先登录！",
          type: "info",
        });
      } else {
        this.$router.push(path);
      }
    },
    topChat() {
      topChatWindowApi({ chatBoxId: thischatBoxId }).then((res) => {
        if (res.data.code == 200) {
          this.getWindowListFun();
          this.$message({
            type: "success",
            message: "已置顶成功",
          });
        } else {
          this.$message({
            type: "info",
            message: "置顶失败",
          });
        }
      });
    },
    deleteChat() {
      deleteChatWindowApi({ chatBoxId: thischatBoxId }).then((res) => {
        if (res.data.code == 200) {
          this.getWindowListFun();
          this.$message({
            type: "success",
            message: "已删除成功",
          });
        } else {
          this.$message({
            type: "info",
            message: "删除失败",
          });
        }
      });
    },
    sendMessage() {
      var condition = {
        type: 3,
        params: {
          userId: this.userInfo.userId,
          friendId: this.chatWindowInfo.talkId,
          msgText: this.chatContent,
          msgType: 0,
        },
      };
      socket.sendMsg(JSON.stringify(condition));
      // 将信息添加到聊天记录里面
      var msg = {
        account: null,
        msgContent: this.chatContent,
        msgTime: new Date(Date.now()),
        msgType: 0,
        msgUserType: 0,
        talkId: 2,
        userAvatar:
          "https://yaling.oss-cn-shenzhen.aliyuncs.com/yinxiu/20230527/avatar-5.jpg",
        userId: 1,
        userNickName: "小小小小小锦鲤",
      };
      this.chatRecordList.push(msg);
    },
    init() {
      this.queryCondition = {
        type: 1,
        params: {
          account: "yx23050001",
          password: "123456",
        },
      };
      socket.sendMsg(JSON.stringify(this.queryCondition));
    },
    websocketOnMessage(event) {
      // 初始化界面时，主动向后台发送一次消息，获取数据
      this.websocketCount += 1;

      if (this.websocketCount === 0) {
        this.init();
      }
      let info = JSON.parse(event.data);
    },
    friendChatFun(info) {
      if (info.msgInfo.friendId == this.chatWindowInfo.talkId) {
        // 当前打开的聊天窗口 直接渲染
        var msg = {
          account: null,
          msgContent: info.msgInfo.msgText,
          msgTime: new Date(info.msgInfo.msgTime),
          msgType: info.msgInfo.msgType,
          msgUserType: 1,
          talkId: info.msgInfo.friendId,
          userAvatar: this.chatWindowInfo.talkAvatar,
          userId: info.userId,
          userNickName: this.chatWindowInfo.talkName,
        };
        this.chatRecordList.push(msg);
      } else {
        // 通过 聊天类型 （群聊/单聊） 和 对方ID来匹配  直接渲染到窗口的聊天记录里面
      }
    },
    consumeMessage(info) {
      // 拿到最新数据重新渲染界面
    },
    searchBtn() {
      // 这里先暂时操作
      searchListApi({
        userId: this.userInfo.userId,
        keyword: this.keyword,
        pageNum: this.pageNum,
        indexType: this.indexType,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$router.push("searchDetail");
        }
      });
    },
    clearSearch() {
      this.isSearch = false;
    },
    getTopicHotListFun() {
      getTopicHotListApi().then((res) => {
        if (res.data.code == 200) {
          this.topicHotList = res.data.data;
        }
      });
    },
    searchHistoryListFun() {
      searchHistoryListApi().then((res) => {
        if (res.data.code == 200) {
          this.searchHistoryList = res.data.data;
        }
      });
    },
    searchWantListFun() {
      searchWantListApi().then((res) => {
        if (res.data.code == 200) {
          this.searchWantList = res.data.data;
        }
      });
    },
    formatDateBetween(curTime, preTime) {
      if (curTime && preTime) {
        var startDate = new Date(preTime);
        var stopDate = new Date(curTime);
        var startTime = startDate.getTime();
        var stopTime = stopDate.getTime();
        var cTime = Number(stopTime) - Number(startTime);
        var secondTime = cTime / 1000 / 60;
        return secondTime > 5;
      }
    },
    userInfoFun() {
      this.$store.dispatch("GetInfo");
    },
    openLoginBtn() {
      this.openLogin = true;
    },

    handleSettings() {
      this.dialogSettins = !this.dialogSettins;
    },
    
    headerUserFun() {
      getHeaderUserInfoApi().then((res) => {
        console.log(res);
        if (res.data.data.code == 200) {
          this.headerUserInfo = res.data.data.data;
        }
      });
    },
    getNoticeListFun() {
      getNoticeListApi().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          // console.log(res.data.data, "getNoticeListApi");
          this.noticeList = res.data.data;
        }
      });
    },
    changeTab(e) {
      this.$router.push({
        path: "/user",
        query: { activeTab: e },
      });
    },
    getWindowListFun() {
      getWindowListApi().then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.windowList = res.data.data;
          this.talkId = this.windowList[0].talkId;
          this.chatWindowInfo = this.windowList[0];
        }
      });
    },
    backUser() {
      this.$router.push({ path: "/user" });
    },
    changeWindow(item, idx) {
      this.isReveal = !this.isReveal;
      this.isVision = true;
      this.chatWindowInfo = item;
      this.activeChatIndex = idx;
      this.talkId = item.talkId;
      this.openContact(item);
    },
    changeDetailWindow(item, idx) {
      this.chatWindowInfo = item;
      this.activeChatIndex = idx;
      this.talkId = item.talkId;
      this.openContact(item);
    },
    openContact(item) {
      searchChatRecordListApi({
        userId: this.userInfo.userId,
        talkId: item.talkId,
        talkType: item.talkType,
        page: 1,
      }).then((res) => {
        if (res.data.code == 200) {
          this.chatRecordList = res.data.data;
        }
      });
      this.isUnfold = true;
    },
    changeVision() {
      this.isVision = !this.isVision;
      this.isReveal = !this.isReveal;
    },
    changeMsgFun(e) {
      this.openLogin = e;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.login {
  /* align-items: center; */
  background: rgba(0, 0, 0, 0.8);
  /* background: var(--color-mask-m1); */
  /* display: flex; */
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
}
.system-box .el-dialog {
  background: #252632;
}
.system-box .el-dialog__title {
  color: #fff;
}
.system-box .el-dialog__body {
  padding: 0;
}
.system-box .el-tabs--left .el-tabs__header.is-left {
  background: #2b2c37;
}
.system-box .el-tabs__item {
  color: #878787;
}
.system-box .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #2f2f2f;
}
.system-box .el-tabs__item.is-active {
  color: #fff;
}
.container {
  z-index: 999;
}
.content-header {
  border-bottom: 1px solid #2b2b2b;
  background: #161823;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
}
/* .search-content .el-input__inner:focus+.search-box{
display: block;
} */
.unsearch-box {
  width: 415px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  /* display: none; */
  z-index: 999;
  position: absolute;
  top: 46px;
  background: #252632;
}
.search-box {
  width: 415px;
  min-height: 250px;
  border-radius: 10px;
  /* display: none; */
  z-index: 999;
  position: absolute;
  top: 46px;
  background: #252632;
}
.history-box,
.want-box,
.hotspot-box {
  width: 96%;
  height: 100%;
  margin: 8px auto;
}
.search-part {
  justify-content: space-between;
  display: flex;
  margin-bottom: 6px;
}
.search-part p {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}
.search-part span {
  font-size: 12px;
  color: #686868;
  transform: scale(0.9);
}
.search-part span:hover {
  color: #d00202;
  cursor: pointer;
}
.history-recode ul li,
.want-recode ul li,
.hotspot-recode ul li {
  cursor: pointer;
}
.want-recode ul li {
  width: 50%;
  text-decoration: none;
}
.history-recode ul li p,
.want-recode ul li a p,
.hotspot-recode ul li p {
  transform: scale(0.9);
  font-size: 12px;
  color: #cfcfcf;
}
.hotspot-recode ul li a p {
  align-items: center;
  display: flex;
}
.hotspot-recode ul li a {
 
  text-decoration: none;
}
.history-recode ul,
.want-recode ul {
  display: flex;
  flex-wrap: wrap;
}
.want-recode ul li p {
  padding: 2px 4px;
  box-sizing: border-box;
}
.hotspot-recode ul li p {
  padding: 4px;
  box-sizing: border-box;
}
.hotspot-recode ul li{
  display: flex;
  margin-left: 16px;
  align-items: center;
}
.want-recode ul li a:hover p,
.hotspot-recode ul li:hover p {
  background: #41424c;
  border-radius: 4px;
  color: #d00202;
}
.want-recode ul li:first-child p,
.want-recode ul li:nth-child(2) p {
  color: #d00202;
}
/* 从第四个热点开始计算index */
.hotspot-recode ul li .grades:first-child,
.hotspot-recode ul li .grades:nth-child(2),
.hotspot-recode ul li .grades:nth-child(3) {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  background-size: 100% 100%;
}
.hotspot-recode ul li:first-of-type .grades{
  background-image: url(../assets/images/top1.png);
}
.hotspot-recode ul li:nth-child(2) .grades{
  background-image: url(../assets/images/top2.png);
}
.hotspot-recode ul li:nth-child(3) .grades{
  background-image: url(../assets/images/top3.png);
}
.hotspot-recode ul li:nth-of-type(n + 4) .other-grades {
  width: 18px;
  height: 18px;
  font-weight: 700;
  color: #51515b;
  font-size: 13px;
  text-align: center;
}
.history-recode ul a {
  text-decoration: none;
}
.history-recode ul li {
  background: #464444;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 5px;
  position: relative;
  float: left;
}

.history-recode ul li i {
  position: absolute;
  right: -6px;
  top: -3px;
  width: 12px;
  height: 12px;
  padding: 1px;
  border-radius: 50%;
  line-height: 12px;
  text-align: center;
  transform: scale(0.8);
  font-size: 12px;
  display: none;
  background: #707070;
}
.history-recode ul li:hover i {
  display: block;
}
.history-recode ul li:hover {
  color: #d00202;
}
.search {
  width: 30%;
  display: flex;
  margin-right: auto;
  margin-left: 28%;
  color: #fff;
  position: relative;
  border-radius: 5px;
  border: 2px solid hsla(0, 0%, 100%, 0.7);
}
.search-content {
  align-items: center;
  display: flex;
  width: 100%;
  border: none;
}

.search-content .el-input__inner {
  background: #161823;
  border: none;
  color: #fff;
}
.search-content .el-input__inner::placeholder {
  color: #6a6a6a;
}
.feature ul li .el-button.is-circle {
  border-radius: 50%;
  font-size: 15px;
  padding: 6px;
  color: #fff;
  opacity: 0.3;
}
.feature {
  margin-right: 30px;
}
.feature ul li {
  list-style: none;
  width: 36px;
  margin: 0 5px;

  text-align: center;
}
.feature-title {
  font-size: 12px;
  font-weight: 500;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  color: #a09f9f;
}
.customer {
  margin-left: 20px;
}
.input-with-select .el-input__suffix {
  cursor: pointer;
  line-height: 40px;
}
.user-photo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-function {
  width: 450px;
  height: 0px;
  display: none;
  border-radius: 10px;
  overflow: hidden;
  z-index: 999;
  position: absolute;
  right: 20px;
  top: 60px;
  background: #252632;
  transition: ease 0.5s;
}
.user-pop {
  margin-top: 5px;
  height: 40px;
  display: flex;
  padding: 0px 15px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.four-function {
  height: 115px;
  width: 100%;
  margin: 10px 0;
  height: 92px;
}

.four-title ul a {
  width: 100px;
}
.four-title {
  height: 40px;

  font-size: 15px;
  width: 100%;
}
.four-function ul,
.four-title ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.four-function ul li {
  width: 25%;
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
}
.four-function ul li p {
  margin-top: 2px;
}
.four-function ul li span {
  font-size: 14px;
}
.four-title ul li {
  width: 85px !important;
  color: #fff;
}
.four-title ul .el-button {
  font-size: 14px;
  color: #a09f9f;
  width: 85px;
}
.user-photo {
  width: 40px;
  margin: 10px 0 0 20px;
  height: 50px;
}
.user-photo:hover .user-function {
  display: block;
  height: 220px;
  animation: anBox5 0.5s ease;
}
.notification-box:hover .notification {
  display: block;
  height: 410px;
}
.notification {
  width: 280px;
  transition: ease 0.5s;
  overflow-y: scroll;
  border-radius: 10px;
  display: none;
  z-index: 999;
  position: absolute;
  top: 60px;
  right: 120px;
  background: #252632;
}
.contribute {
  width: 125px;
  overflow: hidden;
  border-radius: 10px;
  display: none;
  z-index: 999;
  position: absolute;
  top: 60px;
  right: 54px;
  background: #252632;
}
.information-box:hover .gaine {
  display: block;
  height: 437px;
  animation: anBox2 0.5s ease;
}
.information {
  width: 250px;
  height: 437px;
  overflow-y: scroll;
  border-radius: 6px;
  z-index: 999;
  top: 60px;
  right: 70px;
  background: #252632;
}

.information-window {
  width: 250px;
  height: 273px;
  background: #252632;
}
.notification-title-right .el-dropdown-link {
  color: #686868;
}
.information-title {
  position: fixed;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
  background: #252632;
  width: 250px;
  border-radius: 10px 10px 0 0;
  z-index: 999;
}
.information-title p {
  font-size: 16px;
  color: #fff;
}
.notification-box:hover .notification {
  display: block;
  animation: anBox3 0.5s ease;
}
.information-box:hover .information {
  display: block;
  animation: anBox2 0.5s ease;
}
.contribute-box:hover .contribute {
  display: block;
  animation: anBox1 0.5s ease;
}
.information ul,
.notification ul,
.contribute ul {
  flex-direction: column;
  cursor: pointer;
}

@keyframes anBox1 {
  from {
    height: 0px;
  }
  to {
    height: 135px;
  }
}
@keyframes anBox2 {
  from {
    height: 0px;
  }
  to {
    height: 437px;
  }
}
@keyframes anBox3 {
  from {
    height: 0px;
  }
  to {
    height: 410px;
  }
}
@keyframes anBox5 {
  from {
    height: 0px;
  }
  to {
    height: 220px;
  }
}
.information ul li {
  height: 56px;
}
.notification ul li {
  height: 95px;
}
.contribute ul li {
  height: 45px;
  color: #fff;
  font-weight: 200;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
}
.information ul li,
.notification ul li {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #2d2d2d;
}
.information ul li:last-child,
.notification ul li:last-child {
  border-bottom: none;
}
.notification ul li:hover,
.contribute ul li:hover,
.information ul li:hover {
  background: linear-gradient(90deg, #252632, #3a3a3a 40%, #252632);
}

.information-left,
.notification-left {
  margin-left: 10px;
  text-align: left;
}
.information-left p,
.notification-left-name {
  color: #fff;
  font-size: 13px;
}
.notification-left-content {
  color: #adadad;
  font-size: 11px;
  margin: 5px 0;
}
.notification-left span,
.information-left span {
  color: #666666;
  width: 100%;
  display: block;
  font-size: 12px;
  transform: scale(0.9);
  margin-left: -4%;
}
.information-right {
  margin-left: auto;
  width: 14px;
  margin-right: 10px;
  font-size: 12px;
  transform: scale(0.9);
  height: 14px;
  line-height: 14px;
  border-radius: 50%;
  background: #fe2c55;
  color: #fff;
}
.notification-right {
  margin-left: auto;
}
.notification-title {
  height: 35px;
  width: 280px;
  background: #252632;
  border-radius: 10px 10px 0 0;
  z-index: 999;
  position: fixed;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  display: flex;
  box-sizing: border-box;
}
.feature ul li .notification-title-left {
  color: #fff;
  font-size: 16px;
}
.user-pop {
  color: #7c7c7c;
  font-size: 16px;
}
.firend-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.cover-picture {
  width: 45px;
  height: 45px;
  border-radius: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.search-content .el-input-group__append {
  background: none;
  border: none;
}
.search-content .el-input:hover .el-input-group__append {
  background: #fff;
}
.notification::-webkit-scrollbar,
.information::-webkit-scrollbar {
  display: none;
}
.nothing-more {
  text-align: center;
  height: 80px;
  line-height: 60px;
  font-size: 12px;
  color: #ababab;
}
.setting .el-dialog {
  background: #252632;
}
.setting .el-dialog {
  background: #fff;
}
.notice-icon {
  position: absolute;
  bottom: 4px;
  position: absolute;
  right: -2px;
}
.chat-window {
  width: 600px;
  height: 437px;
  border-left: 0.5px solid #333333;
  /* position: absolute;
  top: 60px;
  right: 10px; */
  z-index: 999;
  background: #252632;
}
.chat-header-window {
  width: 100%;
  height: 50px;
  background: #23242f;
  border-bottom: 0.5px solid #333333;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
}
.chat-header-name {
  display: flex;
}
.chat-header-name h6 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-left: 15px;
}
.chat-header-name p {
  font-size: 12px;
  color: #8d8c8c;
  margin-left: 15px;
}
.chat-header-name p i {
  margin-left: 8px;
}
.whole-box {
  height: 60px;
  font-size: 20px;
  color: 20px;
  font-weight: 600;
  line-height: 60px;
  border-bottom: 1px solid #f6f6f6;
  border-right: 1px solid #f6f6f6;
}
.chat-header-btn {
  position: relative;
  margin-right: 10px;
}
.open-more-function:focus + .chat-more-box {
  display: block;
}
.chat-more-box {
  display: none;
  width: 115px;
  position: absolute;
  /* top: 60px; */
  top: 50px;
  color: #ffff;
  right: 10px;
  box-shadow: 1px 2px 6px #626262;
  background: #252632;
  border-radius: 4px;
}
.chat-more-box ul li {
  width: 100%;
  height: 35px;
  cursor: pointer;
  line-height: 35px;
  text-align: left;
  font-size: 14px;
  padding: 0 18px;
}
.chat-more-box ul li:hover {
  color: #c7c7c7;
}
/* .information ul li:hover {
  animation: anBox4 0.5s ease;
} */
@keyframes anBox4 {
  from {
    right: 70px;
  }
  to {
    right: 610px;
  }
}
.chat-header-btn .el-button {
  margin: 0 8px;
  color: #757575;
}
.chat-bottom-window {
  background: #252632;
  width: 565px;
  /* margin: auto; */
  justify-content: center;
  /* text-align: center; */
  margin: 0 18px;
  position: absolute;
  bottom: 8px;
}
.chat-content {
  height: 335px;
  width: 100%;
  padding: 2px 8px 40px 8px;
  box-sizing: border-box;
  overflow-y: scroll;
  /* overflow: hidden; */
}
.chat-content::-webkit-scrollbar {
  display: none;
}
.chat-content > div {
  /* min-height: 145px; */
}
.chat-bottom-window .el-input__inner {
  background: #41424c;
  border: none;
  color: #fff;
}
.opposite-side {
  max-width: 80%;
  display: flex;
  margin-top: 10px;
  /* display: none; */
}
.my-side {
  max-width: 80%;
  margin-top: 10px;
  float: right;
  display: flex;
}
.opposite-picture img,
.my-picture img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.opposite-word,
.my-word {
  max-width: 96%;
  text-align: left;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  box-sizing: border-box;
  padding: 6px 8px;
}
.opposite-word {
  margin-left: 5px;
  background: #41424c;
}
.my-word {
  margin-right: 5px;
  background: #298cff;
}
.concat-time p {
  font-size: 12px;
  color: #847e7e;
  margin: 6px 0 2px 0;
}
.clearfix:after {
  clear: both;
}
.combination {
  /* display: flex; */
  height: 437px;
  display: none;
  position: absolute;
  top: 60px;
  /* display: none; */
  right: 70px;
  /* border: 1px solid red; */
}
.right-top-bottom-angle {
  border-radius: 6px 0 0 6px;
  display: block !important;
  pointer-events: none;
  height: 437px;
  width: 250px;
}
.test {
  display: block;
  height: 437px;
}
/* .right-top-bottom-angle ul li:hover {
  width: 437px !important;
 
} */
.gaine {
  width: 250px;
  height: 0px;
  display: none;
  position: absolute;
  top: 60px;
  right: 70px;
  z-index: 999999999999;
  overflow-y: scroll;
  border-radius: 6px;
  background: #252632;
}
/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.gaine::-webkit-scrollbar,
.gaine-left::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.gaine,
.gaine-left {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.gaine-left {
  width: 250px;
  height: 437px;
  z-index: 999999999999;
  overflow-y: scroll;
  border-radius: 6px;
  background: #252632;
}
.gaine ul,
.gaine-left ul {
  flex-direction: column;
  cursor: pointer;
}
.gaine ul li,
.gaine-left ul li {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #2d2d2d;
  height: 56px;
}
.gaine ul li:hover {
  background: linear-gradient(90deg, #252632, #3a3a3a 40%, #252632);
}
.gaine-window {
  /* width: 850px; */
  height: 437px;
  border-left: 0.5px solid #333333;
  position: absolute;
  top: 60px;
  right: 10px;
  z-index: 999;
  background: #252632;
  display: flex;
}
.gaine-right {
  width: 600px;
}
.chat-box-active {
  background: linear-gradient(90deg, #252632, #3a3a3a 40%, #252632);
}
.login-content {
}
/* .unnotification{
  height: 20px;
} */
.unnotification::-webkit-scrollbar {
  display: none;
}
.information-box:hover .ungaine,
.notification-box:hover .unnotification {
  display: block;
  animation: anBox9 0.5s ease;
  height: 50px;
}
.unnotification {
  line-height: 50px;
  color: #bbb8b8;
  width: 280px;
  /* min-height: 160px; */
  /* height: 0px; */
  transition: ease 0.5s;
  overflow-y: scroll;
  border-radius: 10px;
  display: none;
  z-index: 999;
  position: absolute;
  top: 60px;
  right: 120px;
  /* left: 50px; */
  background: #252632;
}
@keyframes anBox9 {
  from {
    /* top: 0px; */
    height: 0px;
  }
  to {
    /* top: 60px; */
    height: 50px;
  }
}

.ungaine {
  line-height: 50px;
  color: #bbb8b8;
  width: 250px;
  height: 0px;
  display: none;
  position: absolute;
  top: 60px;
  right: 70px;
  z-index: 999999999999;
  overflow-y: scroll;
  border-radius: 6px;
  background: #252632;
}
/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.ungaine::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.ungaine {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>
